<script setup>
import { reactive, toRefs, watch } from "vue";
import MyDatails from "../../components/MyDatails.vue";
import { useRoute, useRouter } from "vue-router";
import { gepasswordAPi, geSmscodeAPi } from "../../http/http";
import { Toast } from "vant";
import "vant/es/toast/style";
const route = useRoute();
const { push } = useRouter;
const status = route.query.id;

const data = reactive({
  form: {
    user_pass: "",
    mobile: route.query.mobile,
    sms_code: route.query.sms_code,
    sureUser_pass: "",
  },
  newFrom: {
    mobile: "",
    sms_code: "",
    user_pass: "",
  },
  // 倒计时数据
  SmscodeTitle: "获取验证码",
  time: null,
  butStatus: false,
  // 手机号正则
  reg: /^(?:(?:\+|00)86)?1\d{10}$/,
  Mystatus: true,
});
if (status == "true") {
  data.Mystatus = false;
} else {
  data.Mystatus = true;
}
// 调用设置密码接口
const FngepasswordAPi = async () => {
  let res = await gepasswordAPi(data.newFrom);
  if (res.code == 200) {
    Toast("修改密码成功");
  }
};
// 点击提设置密码
const onSubmit = async () => {
  if (data.form.user_pass == "") {
    Toast(`${res.msg}`);
    return;
  }
  FngepasswordAPi();
};

// 点击获取验证码
// 点击获取验证码
const getSmscode = async () => {
  // 手机号正则
  if (!data.reg.test(data.newFrom.mobile)) {
    Toast("手机号码格式不正确");
    return false;
  }
  // 调用获取验证码
  let obj = {
    mobile: data.newFrom.mobile,
    sms_type: "login",
  };
  let res = await geSmscodeAPi(obj);
  console.log(res);

  data.time = 11;
  // 计时器
  let outTime = setInterval(() => {
    data.time--;
    data.butStatus = true;
    data.SmscodeTitle = `获取验证码(${data.time})`;
    // 判断数字为0时 结束
    if (data.time == 0) {
      clearInterval(outTime);
      data.time = 11;
      data.butStatus = false;
      data.SmscodeTitle = "获取验证码";
    }
  }, 1000);
};
// 点击完成修改密码
const accomplish = () => {
  FngepasswordAPi();
  push("/setUpInfo");
};
const { form, Mystatus, SmscodeTitle, time, butStatus, newFrom } = toRefs(data);
</script>
<template>
  <div class="setpassword">
    <!-- 头部 -->
    <MyDatails>
      <template #left>
        <van-icon name="arrow-left" @click="$router.back" />
      </template>
      <template #text>
        <span>设置密码</span>
      </template>
    </MyDatails>
    <!-- 输入框 -->
    <div class="pwd" v-if="Mystatus == true">
      <van-cell-group inset>
        <van-field v-model="form.user_pass" placeholder="请设置登录密码" />
        <van-field v-model="form.sureUser_pass" placeholder="请再次输入密码" />
      </van-cell-group>
      <van-button
        style="width: 92%; margin: auto; margin-top: 30px"
        type="primary"
        color="#f15a24"
        block
        @click="onSubmit"
        >提交</van-button
      >
    </div>
    <div class="newPwd" v-else>
      <div class="my_tel">
        <div>
          <input
            type="text"
            v-model="newFrom.mobile"
            placeholder="请输入手机号"
          />
          <van-button
            type="primary"
            color="#f15a24"
            size="small"
            :disabled="butStatus"
            @click="getSmscode"
            >{{ SmscodeTitle }}</van-button
          >
        </div>
      </div>
      <div class="my_tel">
        <div>
          <input
            type="text"
            v-model="newFrom.sms_code"
            placeholder="请输入验证码"
          />
        </div>
      </div>
      <div class="my_tel">
        <div>
          <input
            type="text"
            v-model="newFrom.user_pass"
            placeholder="请输入新密码"
          />
        </div>
      </div>
      <div class="title_a">为保障账号安全，建议您定期修改密码哦</div>
      <van-button
        style="width: 92%; margin: auto; margin-top: 30px"
        type="primary"
        color="#f15a24"
        block
        @click="accomplish"
        >完成</van-button
      >
    </div>
  </div>
</template>


<style lang="scss" scoped>
.title_a {
  color: red;
  font-size: 20px;
  padding: 20px;
}
.van-field {
  border-bottom: 2xp solid #999;
}
.newPwd {
  width: 750px;
  .my_tel {
    display: flex;
    align-items: center;
    height: 100px;
    div {
      flex: 1;
      height: 100px;
      border-bottom: 1px solid #ededed;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }
    span {
      font-size: 50px;
      color: #f8b418;
      margin: 0 20px;
      // margin-left: 10px;
    }
    input {
      font-size: 20px;
      flex: 1;
      height: 100%;
      border: none;
    }
  }
}
</style>